<template>
  <view style="padding: 20rpx">
    <view class="info" style="margin-bottom: 10rpx">
      <view>TOKEN: {{ userInfo.token }}</view>
      <view>OPENID: {{ userInfo.openId }}</view>
    </view>
    <uv-button type="primary" @click="auth">登录认证</uv-button>
  </view>
</template>
<script setup lang="ts">
import { useAppStore } from '@/store/app'
import { authApi } from '@/api/server'

const appStore = useAppStore()
const auth = async () => {
  const { code } = await uni.login()
  // 认证后会更新store，通过计算属性来响应更新页面
  const { token, openid } = await authApi(code)
  appStore.updateToken(token, openid)
}
const userInfo = computed(() => {
  return {
    token: appStore.accessToken,
    openId: appStore.openId,
  }
})
</script>
<style lang="scss" scoped>
.info {
  view {
    color: $uni-text-color;
    font-size: $uni-font-size-base;
    line-height: 4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
</style>
